<template>
  <div style="background-color:#f5f5f5;">
    <!--面包屑-->
    <div class="crumbs">
      <div class="crumbsNav">
        <i class="el-icon-s-home"></i><span>首页 > 房屋详情</span>
      </div>
    </div>
    <!-- 详情-->
    <div class="detailsBox">
      <div class="detailsInfo">
        <h3 style="margin-top: 15px">1成首付可做业主红勘新免佣</h3>
        <p class="p1">浏览人数: <span>802</span>
          人最近更新: <span>6</span>分钟
          发布时间: <span>2019-07-25</span></p>
        <div class="containerBox">
          <!-- 左边-->
          <div class="ItemBox">
            <img src="../../../static/details/dimg01.jpg" width="100%" alt="">
            <p style="color: #999999;font-size: 12px">楼盘信息源自: 25hse.com</p>
            <div class="bannerImg">
              <el-carousel :autoplay="false" indicator-position="outside" style="width: 600px;margin: 0 auto;">
                <el-carousel-item v-for="item in 4" :key="item" style="height: 100px;margin-left: 50px;align-items: center;display: flex;justify-content: space-around;flex-flow: row;flex-direction: row">
                  <div style="width: 100px;height: 70px;">
                    <img src="../../../static/details/dimg02.jpg" width="100%" alt="">
                  </div>
                  <div style="width: 100px;height: 70px;">
                    <img src="../../../static/details/dimg02.jpg" width="100%" alt="">
                  </div>
                  <div style="width: 100px;height: 70px;">
                    <img src="../../../static/details/dimg02.jpg" width="100%" alt="">
                  </div>
                  <div style="width: 100px;height: 70px;">
                    <img src="../../../static/details/dimg02.jpg" width="100%" alt="">
                  </div>
                </el-carousel-item>
              </el-carousel>
<!--              <div style="width: 50px">-->
<!--                <el-button class="btnB" type="primary" plain>-->
<!--                  <i class="el-icon-arrow-left"></i>-->
<!--                </el-button>-->
<!--              </div>-->

<!--              <div>-->
<!--                <img src="../../../static/details/dimg02.jpg" width="100%" alt="">-->
<!--              </div>-->
<!--              <div>-->
<!--                <img src="../../../static/details/dimg02.jpg" width="100%" alt="">-->
<!--              </div>-->
<!--              <div>-->
<!--                <img src="../../../static/details/dimg02.jpg" width="100%" alt="">-->
<!--              </div>-->
<!--              <div>-->
<!--                <img src="../../../static/details/dimg02.jpg" width="100%" alt="">-->
<!--              </div>-->
<!--              <div style="width: 50px">-->
<!--                <el-button class="btnB" type="primary" plain>-->
<!--                  <i class="el-icon-arrow-right"></i>-->
<!--              </el-button>-->
<!--              </div>-->
            </div>
            <div class="chooseImg">
              <el-button class="changBtn">图片</el-button>
              <el-button class="changBtn">地图</el-button>
              <el-button class="changBtn">街景</el-button>
            </div>
          </div>
          <!-- 右边-->
          <div class="ItemBox rightImte">
            <div class="columeItem price">
              <div class="priceItem">
                <h1 style="color: #fb9401;">$2,380万</h1>
              </div>
              <div class="priceItem" style="color: #999999;">
                <p>建筑尺卖14,000元/尺</p>
                <p>建筑尺卖14,000元/尺</p>
              </div>
              <div class="priceItem">
                <img src="../../../static/details/dimg03.jpg" width="50px" style="float: right" alt="">
              </div>
            </div>
            <div class="columeItem performance">
              <div class="performanceItem">
                <div class="performanceInfo">
                  <img src="../../../static/details/dimg04.jpg" width="60" alt="">
                  <div>
                    <p class="InfoName">实用面积</p>
                    <p class="sizeNum">196尺</p>
                  </div>
                </div>
                <div class="performanceInfo">
                  <img src="../../../static/details/dimg05.jpg" width="60" alt="">
                  <div>
                    <p class="InfoName">建筑面积</p>
                    <p class="sizeNum">206尺</p>
                  </div>
                </div>
              </div>
              <div class="performanceItem">
                <div class="performanceInfo">
                  <img src="../../../static/details/dimg06.jpg" width="60" alt="">
                  <div>
                    <p class="InfoName">实用面积</p>
                    <p class="sizeNum">196尺</p>
                  </div>
                </div>
                <div class="performanceInfo">
                  <img src="../../../static/details/dimg07.jpg" width="60" alt="">
                  <div>
                    <p class="InfoName">房间数目</p>
                    <p class="sizeNum">3</p>
                  </div>
                </div>
              </div>
              <div class="performanceItem">
                <div class="performanceInfo">
                  <img src="../../../static/details/dimg08.jpg" width="60" alt="">
                  <div>
                    <p class="InfoName">实用比率</p>
                    <p class="sizeNum">72%</p>
                  </div>
                </div>
                <div class="performanceInfo">
                  <img src="../../../static/details/dimg09.jpg" width="60" alt="">
                  <div>
                    <p class="InfoName">年限</p>
                    <p class="sizeNum">-</p>
                  </div>
                </div>
              </div>

            </div>
            <div class="columeItem userInfo">
              <span style="color: #333333;font-weight: bold;font-size:20px;">龙生</span>
              <span style="color: #999999">(代理人)</span>
              <p style="color: #999999;">有什么问题请跟业主反馈到此楼盘，多谢支持!</p>
              <p style="color: #e10d0d;font-size: 18px;"><span><i class="el-icon-phone"></i>96787708</span>
                <span style="margin-left: 15px;"><i class="el-icon-phone"></i>96787708</span></p>
              <p style="color: #999999"><span>固话: 4882088</span><span style="margin-left: 15px">Email:djbaskdbasdbas@yahoo.com</span>
              </p>
              <p style="color: #999999"><span>牌照: C-047084</span><span style="margin-left: 15px">代理公司:天蓝渔业有限公司</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    补充资料-->
    <div class="suppInfoBox">
      <div class="suppInfoTxt">
        <div class="tabsBox">
          <div class="titleBox">
            <div style="border-bottom: 2px solid #ad2022"><a href="#aaa" style="color: #000000;">房屋资料</a></div>
            <div style="color: #999999"><a href="#bbb" style="color: #999999;">屋源相片</a></div>
            <div style="color: #999999"><a href="#ccc" style="color: #999999;">地图周边</a></div>
            <div style="color: #999999"><a href="#ddd" style="color: #999999;">按揭计算</a></div>
          </div>
          <div class="Supp">
            <h3 style="margin-left: 15px" id="aaa">补充资料</h3>
          </div>
          <div class="suppType">
            <p>
              <span>楼龄: 4年</span>
              <span>装横:豪华装横</span>
              <span> 楼层:地下/共1F坐向: 东北</span>
            </p><br/>
            <p>管理费: 500元/月</p>
          </div>
          <div class="Supp">
            <h3 style="margin-left: 15px">屋况说明</h3>
          </div>
          <div class="explain">
            <p>上述資訊、圖片或數據只供參考,其準確性及真實性以業主最後提供的資料為準.天匯物
              業有限公司不會對任何因使用或涉及使用此網站資料的任何因由而引致的損失或損害
              負責上述資訊、圖片或數據只供參考,其準確性及真實性以業主最後提供的資料為準天
              上述資訊、圖片或數據只供參考,其準確性及真實性以業主最後提供的資料為準.天匯物
              業有限公司不會對任何因使用或涉及使用此網站資料的任何因由而引致的損失或損害
              負責上述資訊、圖片或數據只供參考,其準確性及真實性以業主最後提供的資料為準天
              上述資訊、圖片或數據只供參考,其準確性及真實性以業主最後提供的資料為準.天匯物
              業有限公司不會對任何因使用或涉及使用此網站資料的任何因由而引致的損失或損害
              負責上述資訊、圖片或數據只供參考,其準確性及真實性以業主最後提供的資料為準天
              上述資訊、圖片或數據只供參考,其準確性及真實性以業主最後提供的資料為準.天匯物
              業有限公司不會對任何因使用或涉及使用此網站資料的任何因由而引致的損失或損害
              負責上述資訊、圖片或數據只供參考,其準確性及真實性以業主最後提供的資料為準天
            </p>
          </div>
        </div>
        <div class="tabsBox photoBox">
          <div class="Supp ">
            <h3 style="margin-left: 15px" id="bbb">屋源相片</h3>
          </div>
          <div class="photo">
            <div>
              <img src="../../../static/details/dimg10.jpg" width="100%" height="200" alt="">
            </div>
            <div>
              <img src="../../../static/details/dimg10.jpg" width="100%" height="200" alt="">
            </div>
            <div>
              <img src="../../../static/details/dimg10.jpg" width="100%" height="200" alt="">
            </div>
            <div>
              <img src="../../../static/details/dimg10.jpg" width="100%" height="200" alt="">
            </div>
          </div>
        </div>
        <div class="tabsBox matchingBox">
          <div class="Supp ">
            <h3 style="margin-left: 15px" id="ccc">周边配套</h3>
          </div>
          <div class="matching">
            <div style="justify-content: space-between;display: flex;flex-flow: row;flex-direction: row;">
              <div style="width: 50px;height: 50px;">
                <img src="../../../static/details/dimg11.jpg" width="100%" alt="">
              </div>
              <span style="display: inline-block;line-height: 50px;font-weight: bold;">交通</span>
            </div>
            <div style="justify-content: space-between;display: flex;flex-flow: row;flex-direction: row;">
              <div style="width: 50px;height: 50px;">
                <img src="../../../static/details/dimg12.jpg" width="100%" alt="">
              </div>
              <span style="display: inline-block;line-height: 50px;font-weight: bold;">教育</span>
            </div>
            <div style="justify-content: space-between;display: flex;flex-flow: row;flex-direction: row;">
              <div style="width: 50px;height: 50px;">
                <img src="../../../static/details/dimg13.jpg" width="100%" alt="">
              </div>
              <span style="display: inline-block;line-height: 50px;font-weight: bold;">购物</span>
            </div>
            <div style="justify-content: space-between;display: flex;flex-flow: row;flex-direction: row;">
              <div style="width: 50px;height: 50px;">
                <img src="../../../static/details/dimg14.jpg" width="100%" alt="">
              </div>
              <span style="display: inline-block;line-height: 50px;font-weight: bold;">餐饮</span>
            </div>
            <div style="justify-content: space-between;display: flex;flex-flow: row;flex-direction: row;">
              <div style="width: 50px;height: 50px;">
                <img src="../../../static/details/dimg15.jpg" width="100%" alt="">
              </div>
              <span style="display: inline-block;line-height: 50px;font-weight: bold;">医疗</span>
            </div>
            <div style="justify-content: space-between;display: flex;flex-flow: row;flex-direction: row;">
              <div style="width: 50px;height: 50px;">
                <img src="../../../static/details/dimg16.jpg" width="100%" alt="">
              </div>
              <span style="display: inline-block;line-height: 50px;font-weight: bold;">$银行</span>
            </div>
          </div>
          <div class="suppMap"></div>
          <div class="suppMap suppTable">
            <div v-for="item in [1,2,3,4]" class="rowTable">
              <div>
                <img src="../../../static/details/dimg17.jpg" alt="">
              </div>
              <div style="margin-left: 15px;width: 600px;text-align: left">
                <p style="font-weight: bold;font-size: 16px;">1青山路远郎路段,新港酒店封面
                </p>
                <p><span style="font-size: 14px;color: #999999;text-align: left;font-weight: bold;">611 (专线小巴)，611 B(专线小巴)</span>
                </p>
              </div>
              <div>
                <p style="color: #fd9902;font-weight: bold;font-size: 20px">499mm</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="suppInfoImg">
        <div style="width: 100%;height: 400px;border: 1px solid #000;"></div>
        <h3 style="margin-top: 15px">推荐楼盘</h3>
        <div class="cardImg" v-for="item in [1,2,3,4]">
          <img src="../../../static/details/dimg118.jpg" width="100%" alt="">
          <h4 style="padding-left: 10px;">银月湾Aurora</h4>
          <p style="font-weight: bold;color: #999999;padding-left: 10px;font-size: 14px;">住宅屋菀.开放式.155尺-高夏.1分钟内更新</p>
          <p style="font-size: 12px;padding-left: 10px;">
            <span style="padding: 5px;font-size: 12px;background-color:#f1e9dc;color: #ddc181">豪华装修</span>
            <span style="padding: 5px;font-size: 12px;background-color:#f1e9dc;color: #ca908d">豪华装修</span>
            <span style="padding: 5px;font-size: 12px;background-color:#f1e9dc;color: #98b0cc">豪华装修</span></p>
          <div style="display: flex;justify-content: space-between;flex-flow: row;flex-direction: row;padding-left: 10px;">
            <el-rate></el-rate>
            <span style="color: #fbb355;font-weight: bold;font-size: 18px;display: inline-block;padding-right: 10px;">$750万</span></div>
           </div>
      </div>
    </div>
    <div style="width: 1200px;height: 600px;margin: 15px auto;background-color: #fff;">
      <div class="mortgagcScheme graphical" style="margin-top: 30px;">
        <h3 style="text-align: left;margin:15px;" id="ddd">按揭计划</h3>
        <div style="margin-top: 15px;">
          <p style="color: #999999">注:所有新盘内容，包括物业资料,图片等均由28HSE编辑部输入。以上的物业资料只供参考，一切以发展商最新公告为准。</p>
        </div>
        <div class="inpBox">
          <div>
            按揭成数<el-input class="planBtn"  v-model="input" placeholder="51"></el-input>%
          </div>
          <div>
            还款年期<el-input class="planBtn"  v-model="input" placeholder="2"></el-input>年
          </div>
          <div>
            按揭利率<el-input class="planBtn"  v-model="input" placeholder="2.35"></el-input>%
          </div>
        </div>
        <div class="contribution">
          <div>
            <span class="conText">每月供款</span>
            <span>$19,433元</span>
          </div>
          <div>
            <span class="conText">物业楼债</span>
            <span>$ 19,433元</span>
          </div>
        </div>
        <div class="ring">
          <div style="margin-left: 200px;">
            <img src="../../../static/buyingTools/bimg01.jpg" width="250" alt="">
          </div>
          <div class="rightBox">
            <div>
              <span class="span1"></span>
              <p>
                <span>参考首期</span>
                <span style="margin-left: 30px">$4,800,000元</span>
              </p>
            </div>
            <div>
              <span  class="span2"></span>
              <p>
                <span>参考首期</span>
                <span style="margin-left: 30px">$4,800,000元</span>
              </p>
            </div>
            <div>
              <span class="span3"></span>
              <p>
                <span>参考首期</span>
                <span style="margin-left: 30px">$4,800,000元</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
  export default {
    name: "details", data() {
      return {
        activeName: 'first'
      };
    },
  }
</script>

<style>
  .el-carousel__item{
    width: 500px;
  }

  .el-carousel__item:nth-child(2n) {
    /*background-color: #99a9bf;*/
  }

  .el-carousel__item:nth-child(2n+1) {
    /*background-color: #d3dce6;*/
  }
  .el-carousel__button {
    display: none !important;
  }
  .el-carousel__container{
    height: 100px;
    /*border: 1px solid blue;*/
  }
  /*<!--面包屑-->*/
  .crumbs {
    width: 100%;
    height: 52px;
    background-color: #ad2022;
  }

  .crumbs .crumbsNav {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    color: #FFFFFF;
    /*border: 1px solid #000;*/
    line-height: 52px;
    text-align: left;
  }

  /*  详情*/
  .detailsBox {
    width: 100%;
    height: 650px;
    /*border: 1px solid #000;*/
    background-color: #FFFFFF;
  }

  /*左边展示图*/
  .detailsBox .detailsInfo {
    width: 1200px;
    height: 600px;
    /*border: 1px solid blue;*/
    margin: 0 auto;
    text-align: left;
  }

  .detailsBox .detailsInfo .p1 span {
    margin: 15px 15px 0 0;

  }

  .detailsBox .detailsInfo .p1 {
    font-size: 12px;
    margin-top: 15px;
    color: #999999;
  }

  .detailsBox .detailsInfo .containerBox {
    width: 1200px;
    height: 550px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;
    margin-top: 15px;
  }

  .detailsBox .detailsInfo .containerBox .ItemBox {
    width: 49%;
    height: 550px;
    /*background-color: #000;*/
    /*border: 1px solid #000;*/
  }

  .detailsBox .detailsInfo .containerBox .bannerImg {
    /*width: 100%;*/
    height: 70px;
    /*border: 1px solid #000;*/
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*flex-flow: row;*/
    /*flex-direction: row;*/
    /*margin-top: 15px;*/
  }

  .detailsBox .detailsInfo .containerBox .bannerImg div {
    /*width: 100px;*/
    /*height: 72px;*/
    /*border: 1px solid #000;*/
  }

  .detailsBox .detailsInfo .containerBox .bannerImg .btnB {
    /*width: 50px;*/
    /*height: 60px;*/
    /*background-color: #cccccc;*/
    /*color: #FFFFFF;*/
    /*font-size: 20px;*/
    /*font-weight: bold;*/
    /*text-align: center;*/
  }

  .detailsBox .detailsInfo .containerBox .chooseImg {
    width: 100%;
    height: 100px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;
    margin-top: 15px;

  }

  .detailsBox .detailsInfo .containerBox .chooseImg .changBtn {
    width: 200px;
    height: 50px;
    background-color: #ad2022;
    color: #FFFFFF;
    font-weight: bold;
    border-radius: 0;
  }


  /*  右边展示信息*/
  .containerBox .rightImte .columeItem {
    width: 100%;
    height: 100px;
    /*border: 1px solid #000;*/
    margin-top: 15px;
  }

  .containerBox .rightImte .price {
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;
    height: 60px;
    border-bottom: 1px solid #ccc;
  }

  .containerBox .rightImte .price .priceItem {
    width: 200px;
    height: 60px;
    /*border: 1px solid #000;*/
    font-weight: bold;
  }

  .containerBox .rightImte .performance {
    height: 250px;
    border-bottom: 1px solid #ccc;
  }

  .containerBox .rightImte .performance .performanceItem {
    width: 100%;
    height: 80px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: flex-start;
    flex-flow: row;
    flex-direction: row;

  }

  .containerBox .rightImte .performance .performanceItem .performanceInfo {
    height: 60px;
    width: 200px;
    /*border: 1px solid red;*/

  }

  .containerBox .rightImte .performance .performanceItem .performanceInfo img {
    float: left;
  }

  .containerBox .rightImte .performance .performanceItem .performanceInfo .InfoName {
    color: #b3b3b3;
    font-weight: bold;
    margin-top: 10px;

  }

  .containerBox .rightImte .performance .performanceItem .performanceInfo .sizeNum {
    font-weight: bold;
    margin-top: 10px;
    font-size: 14px;
  }

  .containerBox .rightImte .userInfo {
    height: 150px;
    font-weight: bold;
    line-height: 30px;
  }

  /*  补充资料*/
  .suppInfoBox {
    height: 2320px;
    width: 1200px;
    /*border: 1px solid #000;*/
    margin: 30px auto;
    display: flex;
    flex-flow: row;
    flex-direction: row;
    justify-content: space-between;
  }

  .suppInfoBox .suppInfoTxt {
    width: 700px;
    height: 2320px;
    /*border: 1px solid red;*/
  }

  .suppInfoBox .suppInfoTxt .tabsBox {
    width: 100%;
    height: 700px;
    background-color: #fff;
  }

  .suppInfoBox .suppInfoTxt .tabsBox .titleBox {
    width: 100%;
    height: 80px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;
    box-shadow: 0 0 5px #ccc;
  }

  .suppInfoBox .suppInfoTxt .tabsBox .titleBox div {
    width: 200px;
    height: 80px;
    /*border: 1px solid #000;*/
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    line-height: 80px;
  }

  .suppInfoBox .suppInfoTxt .tabsBox .Supp {
    width: 98%;
    height: 40px;
    border-left: 5px solid #ad2022;
    margin: 30px auto;
    border-radius: 5px 5px 5px 5px;
    text-align: left;
  }

  .suppInfoBox .suppInfoTxt .tabsBox .suppType {
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    padding-left: 30px;
  }

  .suppInfoBox .suppInfoTxt .tabsBox .explain {
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    padding: 0 30px 0 30px;
  }

  .photoBox {
    height: 550px !important;
  }

  .photoBox .photo {
    width: 100%;
    height: 430px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-flow: wrap-reverse;
    /*flex-direction: row-reverse;*/
  }

  .photoBox .photo div {
    width: 345px;
    height: 200px;
    /*border: 1px solid #000;*/
  }

  .matchingBox {
    height: 1000px !important;
  }

  .matchingBox .matching {
    width: 95%;
    height: 50px;
    /*border: 1px solid #000;*/
    margin: 0 auto;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-around;
    flex-flow: row;
    flex-direction: row;
  }

  .matchingBox .matching div {
    width: 100px;
    height: 50px;
    /*border: 1px solid #000;*/
  }

  .matchingBox .suppMap {
    width: 95%;
    height: 400px;
    /*border: 1px solid #000;*/
    margin: 15px auto;

  }

  .suppTable {
    box-shadow: 5px 5px 5px #ccc;
    border: none;
  }

  .rowTable {
    width: 95%;
    height: 80px;
    border-bottom: 1px solid #ccc;
    margin: 15px auto;
    display: flex;
    justify-content: flex-start;
    flex-flow: row;
    flex-direction: row;

  }


  .suppInfoBox .suppInfoImg {
    width: 450px;
    height: 2320px;
    /*border: 1px solid blue;*/
    text-align: left;
  }

  .suppInfoBox .suppInfoImg .cardImg {
    width: 100%;
    height: 400px;
    /*border: 1px solid #000;*/
    line-height: 30px;
    background-color: #fff;
    margin-top: 15px;
  }
/*按揭计划*/

  .graphical{
    height: 600px!important;
  }
  .inpBox{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-flow: row;
    margin-top: 30px;
  }
  .inpBox .planBtn{
    width: 100px;
    margin: 0 15px 0 15px;
  }
  .contribution{
    width: 100%;
    height: 30px;
    /*border: 1px solid #000;*/
    margin-top: 30px;
    justify-content: space-around;
    display: flex;
    flex-flow: row;
    flex-direction: row;
  }
  .contribution .conText{
    color: #999999;
    margin-right: 30px;
  }
  .graphical .ring{
    /*border: 1px solid #000;*/
    height: 300px;
    margin-top: 50px;
    justify-content: flex-start;
    display: flex;
    flex-flow: row;
    flex-direction: row;
  }
  .graphical .ring .rightBox{
    width: 300px;
    line-height: 50px;
    display: flex;
    justify-content: space-around;
    flex-flow: column;
    flex-direction: column;
    margin-left: 30px;
  }
  .graphical .ring .rightBox .span1{
    width: 100px;
    height: 40px;
    background-color:#f9b955;
    display: inline-block;
    border-radius: 5px;
  }
  .graphical .ring .rightBox .span2{
    width: 100px;
    height: 40px;
    background-color:#43cb83;
    display: inline-block;
    border-radius: 5px;
  }
  .graphical .ring .rightBox .span3{
    width: 100px;
    height: 40px;
    background-color:#61bae2;
    display: inline-block;
    border-radius: 5px;
  }

  .graphical .ring div{
    /*border: 1px solid #000;*/
    line-height: 40px;
  }
  .graphical .ring div p{
    float: right;
  }

</style>
